{% extends "base.html" %}

{% block title %}{{ title }}{% endblock %}

{% block content %}
<div class="row">
    <div class="col-md-12">
        <h2 class="mb-4">{{ title }}</h2>
        
        <form id="editForm" class="needs-validation" novalidate>
            <div class="row">
                <!-- 基本信息 -->
                <div class="col-md-6">
                    <h4 class="mb-3">基本信息</h4>
                    
                    <div class="mb-3">
                        <label for="year" class="form-label required">年份</label>
                        <input type="number" class="form-control" id="year" name="year" 
                               value="{{ service.year }}" required>
                        <div class="invalid-feedback">请输入年份</div>
                    </div>
                    
                    <div class="mb-3">
                        <label for="gepCity" class="form-label required">城市</label>
                        <input type="text" class="form-control" id="gepCity" name="gepCity" 
                               value="{{ service.gepCity }}" required>
                        <div class="invalid-feedback">请输入城市</div>
                    </div>
                    
                    <div class="mb-3">
                        <label for="gepDistrict" class="form-label required">区县</label>
                        <input type="text" class="form-control" id="gepDistrict" name="gepDistrict" 
                               value="{{ service.gepDistrict }}" required>
                        <div class="invalid-feedback">请输入区县</div>
                    </div>
                    
                    <div class="mb-3">
                        <label for="gepTown" class="form-label required">乡镇</label>
                        <input type="text" class="form-control" id="gepTown" name="gepTown" 
                               value="{{ service.gepTown }}" required>
                        <div class="invalid-feedback">请输入乡镇</div>
                    </div>
                </div>
                
                <!-- 调节服务数据 -->
                <div class="col-md-6">
                    <h4 class="mb-3">调节服务数据</h4>
                    
                    <div class="mb-3">
                        <label for="outWaterSourceConservation" class="form-label">水源涵养</label>
                        <input type="number" class="form-control" id="outWaterSourceConservation" 
                               name="outWaterSourceConservation" step="0.01"
                               value="{{ service.outWaterSourceConservation or '' }}">
                    </div>
                    
                    <div class="mb-3">
                        <label for="outSoilConservation" class="form-label">土壤保持</label>
                        <input type="number" class="form-control" id="outSoilConservation" 
                               name="outSoilConservation" step="0.01"
                               value="{{ service.outSoilConservation or '' }}">
                    </div>
                    
                    <div class="mb-3">
                        <label for="outNegativeOxygenIons" class="form-label">负氧离子</label>
                        <input type="number" class="form-control" id="outNegativeOxygenIons" 
                               name="outNegativeOxygenIons" step="0.01"
                               value="{{ service.outNegativeOxygenIons or '' }}">
                    </div>
                    
                    <div class="mb-3">
                        <label for="outAirPurification" class="form-label">空气净化</label>
                        <input type="number" class="form-control" id="outAirPurification" 
                               name="outAirPurification" step="0.01"
                               value="{{ service.outAirPurification or '' }}">
                    </div>
                    
                    <div class="mb-3">
                        <label for="outWaterPurification" class="form-label">水质净化</label>
                        <input type="number" class="form-control" id="outWaterPurification" 
                               name="outWaterPurification" step="0.01"
                               value="{{ service.outWaterPurification or '' }}">
                    </div>
                </div>
            </div>
            
            <div class="row">
                <div class="col-md-6">
                    <div class="mb-3">
                        <label for="outCarbonSequestration" class="form-label">固碳</label>
                        <input type="number" class="form-control" id="outCarbonSequestration" 
                               name="outCarbonSequestration" step="0.01"
                               value="{{ service.outCarbonSequestration or '' }}">
                    </div>
                    
                    <div class="mb-3">
                        <label for="outOxygenRelease" class="form-label">释氧</label>
                        <input type="number" class="form-control" id="outOxygenRelease" 
                               name="outOxygenRelease" step="0.01"
                               value="{{ service.outOxygenRelease or '' }}">
                    </div>
                    
                    <div class="mb-3">
                        <label for="outClimateRegulation" class="form-label">气候调节</label>
                        <input type="number" class="form-control" id="outClimateRegulation" 
                               name="outClimateRegulation" step="0.01"
                               value="{{ service.outClimateRegulation or '' }}">
                    </div>
                </div>
                
                <div class="col-md-6">
                    <div class="mb-3">
                        <label for="outCalcFloodRegulation" class="form-label">洪水调蓄</label>
                        <input type="number" class="form-control" id="outCalcFloodRegulation" 
                               name="outCalcFloodRegulation" step="0.01"
                               value="{{ service.outCalcFloodRegulation or '' }}">
                    </div>
                    
                    <div class="mb-3">
                        <label for="outCalcBiodiversityProtection" class="form-label">生物多样性保护</label>
                        <input type="number" class="form-control" id="outCalcBiodiversityProtection" 
                               name="outCalcBiodiversityProtection" step="0.01"
                               value="{{ service.outCalcBiodiversityProtection or '' }}">
                    </div>
                    
                    <div class="mb-3">
                        <label for="outCalcNoiseReduced" class="form-label">降噪</label>
                        <input type="number" class="form-control" id="outCalcNoiseReduced" 
                               name="outCalcNoiseReduced" step="0.01"
                               value="{{ service.outCalcNoiseReduced or '' }}">
                    </div>
                </div>
            </div>
            
            <div class="row">
                <div class="col-md-12">
                    <hr>
                    <div class="mb-3">
                        <button type="submit" class="btn btn-primary">保存修改</button>
                        <a href="/regulation_services" class="btn btn-secondary">返回列表</a>
                    </div>
                </div>
            </div>
        </form>
    </div>
</div>

<!-- 消息提示模态框 -->
<div class="modal fade" id="messageModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">提示</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <p id="messageContent"></p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
$(document).ready(function() {
    // 表单验证
    const form = document.getElementById('editForm');
    
    form.addEventListener('submit', function(event) {
        event.preventDefault();
        event.stopPropagation();
        
        if (form.checkValidity()) {
            // 收集表单数据
            const formData = new FormData(form);
            const data = {};
            
            // 转换 FormData 为普通对象
            for (let [key, value] of formData.entries()) {
                if (value === '') {
                    data[key] = null;
                } else if (key.startsWith('out') && !isNaN(value)) {
                    data[key] = parseFloat(value);
                } else {
                    data[key] = value;
                }
            }
            
            // 发送 AJAX 请求
            $.ajax({
                url: '/regulation_services/{{ service.id }}',
                type: 'PUT',
                contentType: 'application/json',
                data: JSON.stringify(data),
                success: function(response) {
                    showMessage('数据更新成功！');
                    setTimeout(function() {
                        window.location.href = '/regulation_services';
                    }, 1500);
                },
                error: function(xhr) {
                    const error = xhr.responseJSON ? xhr.responseJSON.error : '更新失败';
                    showMessage('错误：' + error, 'error');
                }
            });
        }

        form.classList.add('was-validated');
    });

    // 显示消息
    function showMessage(message, type = 'success') {
        $('#messageContent').text(message);
        $('#messageModal').modal('show');
    }
});
</script>
{% endblock %}